实战篇 2 预缓存|PWA专题 | 前端进阶之旅

在 Service Worker 的 install 事件中，我们一般会对静态资源进行缓存处理，比如：

self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open('precache');
    await cache.addAll([
      '/',
      '/index.html',
      '/main.css',
      '/main.js',
      '/image.jpg'
    ]);
  })());
});

@前端进阶之旅: 代码已经复制到剪贴板

这种在安装阶段将资源进行缓存以便 Service Worker 变为可用后可直接从本地缓存中获取资源的能力，我们称之为预缓存（prechching）。它与运行时缓存（Service Worker 可用后，通过监听其 fetch 事件，将资源请求结果动态添加到缓存中的机制）一起为 Web 应用的离线访问提供了技术支持

# 自动生成预缓存资源列表

上例中，我们以硬编码的形式定义了预缓存资源列表，这在 Web 应用愈加复杂、前端构建及工程体系逐步完善的今天，既效率低下，又容易出错，因此本节我们借用 webpack 来简单实现资源列表的自动生成。

首先，我们如下修改 sw.js 文件：

const precacheList = <%- precacheList %>;
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(precacheName);
    await cache.addAll(precacheList);
  })());
});

@前端进阶之旅: 代码已经复制到剪贴板

我们通过定义一个 precacheList 常量并将其作为参数传递给 cache.addAll 方法来替换硬编码资源列表，precacheList 的值使用了 ejs 模板语法，该值会在执行 build 时替换成真实资源列表，比如：

const precacheList = ["/db.90cab081eccbdfa6e090fc6ebbadb90f.js","/plus.6b433cf1453965994b3029ea10ec8449.png","/home.5704e93d911a9fcdaf14.css"];

@前端进阶之旅: 代码已经复制到剪贴板

可究竟如何生成这些真实的资源信息呢？非常简单，我们只需实现一个简单的 webpack plugin 即可。

创建 SWFilePlugin.js：

const path = require('path');
const memFs = require('mem-fs');